<template>
  <div class="orde-list">
    <Navigation></Navigation>

    <!-- 订单号，产品名，支付状态，查看详情，支付订单 -->
    <el-table
      :data="orderTable"
      stripe
      class="order-table"
      v-loading="orderListLoading"
    >
      <el-table-column prop="order_id" label="订单号" align="center" />
      <el-table-column prop="good_title" label="产品名" align="center" />
      <el-table-column prop="seckill_price" label="产品价格" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.seckill_price }} 元</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="支付状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : 'default'">
            <span v-if="scope.row.status === '1'">已支付</span>
            <span v-else>未支付</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{
            scope.row.create_time | dateFormat("yyyy-mm-dd hh:mm:ss")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            class="order-opera"
            v-if="scope.row.status === '1'"
            type="primary"
            @click="openDetail(scope.row.order_id)"
            >查看详情</el-button
          >
          <el-button
            class="order-opera"
            v-else
            type="warning"
            @click="toPayOrder(scope.row.order_id)"
            >支付订单</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="queryOrderList"
    />

    <!-- 订单详情窗口 -->
    <el-dialog title="订单详情" :visible.sync="watchingDetail">
      <div class="order-detail">
        <el-descriptions direction="vertical" :column="1" border>
          <el-descriptions-item label="订单号">{{
            orderDetail.orderId
          }}</el-descriptions-item>
          <el-descriptions-item label="产品名">{{
            orderDetail.goodName
          }}</el-descriptions-item>
          <el-descriptions-item label="产品价格"
            >{{ orderDetail.seckillPrice }}元</el-descriptions-item
          >
          <el-descriptions-item label="创建时间">{{
            orderDetail.create_time | dateFormat("yyyy-mm-dd hh:mm:ss")
          }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{
            orderDetail.pay_time | dateFormat("yyyy-mm-dd hh:mm:ss")
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrder, getOrderList, notifyOrderPaySuccess } from "@/api/order";

export default {
  name: "OrderList",
  data() {
    return {
      orderTable: null,
      orderListLoading: false,
      watchingDetail: false,
      orderDetail: {},
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      total: 0,
    };
  },
  created() {
    this.orderListLoading = true;
    this.queryOrderList();
    this.catchUrl();
  },
  methods: {
    queryOrderList() {
      getOrderList(this.queryParams)
        .then((res) => {
          this.orderListLoading = false;
          this.orderTable = res.rows;
          this.total = res.total;
        })
        .catch((err) => {
          this.orderListLoading = false;
        });
    },

    toPayOrder(orderId) {
      this.$router.push("/payOrder/" + orderId);
    },

    catchUrl() {
      let tradeNo = this.$router.history.current.query.out_trade_no;
      let isSend = true;
      if (tradeNo !== undefined && tradeNo !== "") {
        setTimeout(() => {
          let orderList = this.orderTable;
          for (var i = 0; i < orderList.length; i++) {
            if (
              orderList[i].orderId === tradeNo &&
              orderList[i].status === "1"
            ) {
              isSend = false;
              break;
            }
          }
          if (isSend) {
            notifyOrderPaySuccess(tradeNo);
            this.queryOrderList();
          }
        }, 500);
      }
    },

    openDetail(orderId) {
      this.watchingDetail = true;
      getOrder(orderId).then((res) => {
        this.orderDetail = res.data;
      });
    },
  },

  filters: {
    dateFormat: function (val, args) {
      var time = new Date(val);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var day = time.getDate();

      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;

      if (args.toLowerCase() === "yyyy-mm-dd") {
        return year + "年" + month + "月" + day + "日";
      } else {
        var hour = time.getHours();
        var min = time.getMinutes();
        var sec = time.getSeconds();

        if (hour < 10) hour = "0" + hour;
        if (min < 10) min = "0" + min;
        if (sec < 10) sec = "0" + sec;

        return (
          year +
          "年" +
          month +
          "月" +
          day +
          "日" +
          " " +
          hour +
          ":" +
          min +
          ":" +
          sec
        );
      }
    },
  },
};
</script>

<style>
.order-table {
  left: 15%;
  margin-top: 3%;
  width: 70%;
}

.order-opera {
  width: 100px;
  height: 35px;
  font-size: 1.1em;
  line-height: 10px;
}
</style>